class Snake{
    head:HTMLElement;
    bodies:HTMLCollection;
    element:HTMLElement;


    constructor() {
        this.element = document.getElementById('snack') as HTMLElement; //直接用类型断言也可以避免null的情况
        this.head = document.querySelector('#snack > div')!;
        this.bodies = this.element!.getElementsByTagName('div');
    }

    get X(){
        return this.head.offsetLeft;
    }

    get Y(){
        return this.head.offsetTop;
    }

    set X(value){
        if(value == this.X) return;

        if(value < 0 || value > 290){
            throw new Error('撞墙了');
        }
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value){
            if(value > this.X){
                value = this.X - 10;
            }else{
                value = this.X + 10;
            }
        }

        this.moveBody();

        this.head.style.left = value + 'px';
        this.checkHeadBody();

    }

    set Y(value){
        if(value == this.Y) return;
        if(value < 0 || value > 290){
            throw new Error('撞墙了');
        }
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
            if(value > this.Y){
                value = this.Y - 10;
            }else{
                value = this.Y + 10;
            }
        }


        this.moveBody();

        this.head.style.top = value + 'px';
        this.checkHeadBody();
    }

    //增加蛇的身体
    addBody(){
        this.element.insertAdjacentHTML('beforeend',"<div></div>");
    }
    moveBody(){
        for(let i = this.bodies.length-1;i>0;i--){
            (this.bodies[i] as HTMLElement).style.left = (this.bodies[i-1] as HTMLElement).offsetLeft + 'px';
            (this.bodies[i] as HTMLElement).style.top = (this.bodies[i-1] as HTMLElement).offsetTop + 'px';
        }
    }

    checkHeadBody(){
        for(let i = 1;i<this.bodies.length;i++){
            let bd = this.bodies[i] as HTMLElement;
            if(this.X === bd.offsetLeft && this.Y === bd.offsetTop){
                throw new Error('撞到自己了~~~');
            }
        }
    }
}
export default  Snake;